<!-- <template>
  <div class="sMenuTree">
    <!-- <div class="tool"></div> -->
    <!-- <ul class="list">
      <li v-for="item of list" :id="item.id + '_menu'" :key="item.id" class="item">
        <div class="bar">
          <i class="arrows"></i>
          <span class="name">{{item.name}}</span>
        </div>
      </li> -->
      <!-- <li class="item fold selected">
        <div class="bar">
          <i class="arrows"></i>
          <span class="name">input file 动态选择实现</span>
        </div>
        <ul class="list">
          <li class="item">
            <div class="bar">
              <i class="arrows"></i>
              <span class="name">input file 动态选择实现</span>
            </div>
            <ul class="list">
            </ul>
          </li>
        </ul>
      </li>
      <li class="item">
        <div class="bar">
          <i class="arrows"></i>
          <span class="name">input file 动态选择实现</span>
        </div>
        <ul class="list">
          <li class="item selected">
            <div class="bar">
              <i class="arrows"></i>
              <span class="name">input file 动态选择实现</span>
            </div>
            <ul class="list">
            </ul>
          </li>
        </ul>
      </li> -->
    <!-- </ul>
  </div>
</template> -->

<script lang="tsx">
import Vue, { VNode } from 'vue'
import { Prop, Component } from 'vue-property-decorator'
import scopeElements from '../modules/corejs/dom/scope-elements'

@Component
export default class MenuTree extends Vue {
  @Prop() typeName!: string
  @Prop({ default: () => [] }) list!: MenuTreeItem[]
  // selectedIndex = 1
  selectedId = ''
  foldLevel = 1
  render () {
    const { foldLevel, selectedId, typeName } = this
    let index = 0
    function build (list: MenuTreeItem[]) {
      let vList: VNode[] = []
      list.forEach(item => {
        let { level, children, name } = item
        let child = item.children
        let hasChild = child.length
        let id = item.id
        vList.push(
          <li
            id={'menu_' + id} key={id}
            class={
              'item' +
              (level < foldLevel ? '' : ' fold')
            }
          >
            <a href={'#' + typeName + '/' + id}>
              <div
                class={
                  'bar' +
                  (selectedId === id ? ' selected' : '')
                }
              >
                <i class={'arrows' + (hasChild ? '' : ' hidden')}></i>
                <span class="name" domPropsInnerHTML={item.name}></span>
              </div>
            </a>
            {hasChild ? build(child) : ''}
          </li>
        )
      })
      return (
        <ul class="list">{vList}</ul>
      )
    }

    return <div class="sMenuTree" onClick={this.onClick}>{build(this.list)}</div>
  }
  onClick (e: Event) {
    let reg = /^menu_/
    let eArrow: HTMLElement
    scopeElements(e.target as HTMLElement, elem => {
      let id = elem.id
      let { classList } = elem
      if (reg.test(id)) {
        let hId = id.replace(reg, '')
        this.selectedId = hId
        this.$emit('select', hId)
        if (eArrow && !classList.contains('fold')) {
          classList.add('fold')
        } else {
          classList.remove('fold')
        }
        return false
      } else if (classList.contains('arrows')) {
        eArrow = elem
      }
    })
  }
  select (id: string) {
    this.selectedId = id
    let item = document.getElementById('menu_' + id)
    let curr = item
    while (curr) {
      curr.classList.remove('fold')
      curr = curr.parentElement
    }
  }
}
</script>

<style scoped>
.sMenuTree {
  background-color: #fff;
}
.tool {
  /* height: 26px; */
}
.list {
  padding-left: 16px;
  cursor: pointer;
}
.item {
  /* position: relative; */
}
.bar {
  height: 26px;
  line-height: 2;
  /* position: relative; */

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.arrows {
  float: left;
  width: 19px;
  height: 26px;
  background: transparent;
  position: relative;
}
.arrows::before {
  content: '';
  position: absolute;
  top: 9px;
  left: 6px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 8px 4px 0 4px;
  border-color: #666 transparent transparent transparent;
  transition: 0.3s ease;
}
.arrows.hidden {
  visibility: hidden;
}
.item.fold > a > .bar .arrows::before {
  transform: rotate(-90deg);
  border-color: #007bff transparent transparent transparent;
}
.item.fold > .list {
  display: none;
}
.bar::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 26px;
  background-color: #fff;
}
.bar.selected::before {
  background-color: #ffc;
}
.name {
  position: relative;
}

</style>
